<template>
	<view class="home">
		<view class="toptit">
			<view class="text-ff text-center text-32">全部分类</view>
			<view class="padding-20 width-100p flex align-center radius-10 bg-ff margin-lr-30 margin-top-25">
				<image src="../../static/wImg/greySea.png" mode="" class="searchimg"></image>
				<view class="searchline"></view>
				<input type="text" placeholder="输入您想要的内容" class="text-24 flex-one" />
			</view>
		</view>
		<view class="flex align-center">
			<scroll-view scroll-y="true" class="leftbox">
				<view class="text-cut-one" v-for="item,index in firstcate" :key="index"
					:class="firstid==item.id?'btn_active':'btn'" @click="choseFirst(item.id,index)">
					{{item.name?item.name:item.title}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="rightbox" :scroll-into-view="toView" @scroll="goScroll">
				<view class="padding-30 bg-ff margin-bottom-20 radius-10 margin-right-20 pro-box" :id="'get'+index"
					v-for="item,index in firstcate" :key="index">
					<view class="text-32 text-bold">{{item.name?item.name:item.title}}</view>
					<view class="flex align-center flex-warp margin-top-40" v-if="type==1">
						<view class="flex align-center flex-column secondbox margin-bottom-30"
							v-for="items,indexs in item.childlist" :key="indexs"
							@click="choseSecond(items.id,index,items.childlist,item.id)">
							<image :src="items.image" mode="" class="second_img"
								:class="secondid==items.id?'border-ce':''"></image>
							<view class="text-30 text-bold margin-top-20" :class="secondid==items.id?'text-ce':''">
								{{items.name}}
							</view>
						</view>
					</view>
					<view class="flex flex-warp" v-if="firstindex==index&&type==1">
						<view class="sjbox text-cut-one" v-for="item,index in thirdcate" @click="goList(item.id,index)">
							{{item.name}}</view>
					</view>
					<view class="flex align-center flex-warp margin-top-40" v-if="type==2">
						<view class="flex align-center flex-column secondbox margin-bottom-30"
							v-for="items,indexs in item.children" :key="indexs"
							@click="choseSecond(items.id,index,items.children,item.id)">
							<image :src="items.cover" mode="" class="second_img"
								:class="secondid==items.id?'border-ce':''"></image>
							<view class="text-30 text-bold margin-top-20" :class="secondid==items.id?'text-ce':''">
								{{items.title}}
							</view>
						</view>
					</view>
					<view class="flex flex-warp" v-if="firstindex==index&&type==2">
						<view class="sjbox text-cut-one" v-for="item,index in thirdcate" @click="goList(item.id,index)">
							{{item.title}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "", //1商城 2服务
				firstcate: [],
				firstid: "",
				secondcate: [],
				secondid: "",
				thirdcate: [],
				firstindex: "",
				toView: 'id0',
				scroll_view_top: 0, //scroll_view滚动距离
				actual_scroll_view_top: 0, //实时滚动的距离
				heightArr: [],
				chooseIndex: 0,
				isClick: false,
			}
		},
		async onLoad(options) {
			this.type = options.type
			if (options.type == 1) {
				if (options.id) {
					this.firstid = options.id
				}
				//商城全部分类
				this.$u.post('/api/index/get_all_category', {}).then(res => {
					if (res.code == 1) {
						this.firstcate = res.data.category
						this.firstid = options.id ? options.id : res.data.category[0].id

						let index = res.data.category.findIndex(item => item.id == this.firstid);
						let timeindex = index == -1 ? 0 : index;
						this.firstindex = timeindex
						this.secondcate = this.firstcate[timeindex].childlist
						this.secondid = this.secondcate.length ? this.secondcate[0].id : ''
						this.thirdcate = this.secondcate.length > 0 ? this.secondcate[0].childlist : [],
							setTimeout(() => {
								this.calcHeight()
							}, 2000)
					}
				})
			} else if (options.type == 2) {
				let res = await this.$api.service.serviceCate({
					cate_type: 3,
					children: 1
				})
				console.log(res, '服务全部分类')
				this.firstcate = res
				this.firstid = options.id ? options.id : res[0].id
				let index = res.findIndex(item => item.id == this.firstid);
				let timeindex = index == -1 ? 0 : index;
				this.firstindex = timeindex
				this.secondcate = this.firstcate[timeindex].children
				this.secondid = this.secondcate.length ? this.secondcate[0].id : ''
				this.thirdcate = this.secondcate.length > 0 ? this.secondcate[0].children : []
			}
		},
		onReady() {

		},
		methods: {
			choseFirst(id, index) {
				this.firstid = id
				this.isClick = true;
				this.toView = 'get' + index;
				console.log(this.toView);
				setTimeout(res => {
					this.chooseIndex = index
				}, 20)
			},
			choseSecond(id, index, childlist,ids) {
				console.log(childlist,'childlist')
				this.firstid = ids
				this.secondid = id
				this.firstindex = index
				this.thirdcate = childlist
				console.log(childlist, this.thirdcate, 'this.thirdcate')
			},
			calcHeight() {
				let _this = this;
				let heightArr = [];
				let h = 0;
				const query = wx.createSelectorQuery();
				let arr = [];
				query.selectAll('.pro-box').boundingClientRect()
				query.exec(function(res) {
					res[0].forEach((item) => {
						h += item.height;
						arr.push(h);
					})
					_this.heightArr = arr;
					console.log(_this.heightArr, '获取高度')
				})
				if (this.firstid) {
					for (var i = 0; i < this.firstcate.length; i++) {
						if (this.firstid == this.firstcate[i].id) {
							console.log(i, '第几个')
							let index = i
							this.choseFirst(this.firstid, index)
						}
					}
				}
			},
			// 跟随滚动更改选中状态
			goScroll(e) {
				const _this = this;

				if (this.isClick && (_this.firstid == _this.firstcate[_this.firstcate.length - 1].id)) {
					this.isClick = false
					return
				}
				// [205, 410, 615, 820, 1118] Array "获取高度
				const scrollTop = e.detail.scrollTop + 5;
				const scorllArr = this.heightArr;

				if (scrollTop + 5 >= scorllArr[scorllArr.length - 1] - (_this.winHeight)) {
					_this.chooseIndex = scorllArr.length - 1
				} else {
					for (let i = 0; i < scorllArr.length; i++) {
						// 如果滚动的高度大于0且小于第一个大元素的高度，左侧当前选中还是第一个
						if (scrollTop >= 0 && scrollTop < scorllArr[0]) {
							_this.chooseIndex = 0;
						} else if (scrollTop >= scorllArr[i - 1] && scrollTop < scorllArr[i]) {
							// 如果滚动的高度大于等于上一个大元素的高度，且小于当前大元素最终所到达的高度，则左侧选中当前的
							_this.chooseIndex = i;
						}
					}
				}
				console.log(_this.chooseIndex, '_this.chooseIndex')
				console.log(_this.firstcate[_this.chooseIndex].id, 'key')
				_this.firstid = _this.firstcate[_this.chooseIndex].id;
				// _this.productList[_this.chooseIndex].list[second_index].id;
				// console.log(_this.chooseIndex+','+_this.cateid)
			},
			goList(id,index) {
				console.log(id, this.type)
				
				if (this.type == 1) {
					uni.navigateTo({
						url: '/wNew/pages/classify?id='+this.firstid+'&second='+this.secondid+'&third='+index
					})
				}else if(this.type == 2){
					uni.navigateTo({
						url: '/wNew/pages/fuwucate?id='+this.firstid+'&second='+this.secondid+'&third='+index
					})
				}
			}
		}
	}
</script>

<style>
	@import url(@/components/common.css);

	.home {
		width: 100%;
		height: 100vh;
		background: #fff;
	}

	.toptit {
		background: linear-gradient(180deg, #5D64CA 0%, #6F9BDF 100%);
		height: 264rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.searchimg {
		width: 25rpx;
		height: 23rpx;
	}

	.searchline {
		width: 2rpx;
		height: 32rpx;
		background: #B0B0B0;
		margin: 0 20rpx;
	}

	.leftbox {
		width: 200rpx;
		height: calc(100vh - 264rpx);
		background: #F6F6F6;
	}

	.rightbox {
		width: calc(100% - 200rpx);
		height: calc(100vh - 264rpx);
		background: #F6F6F6;
	}

	.btn_active {
		width: 200rpx;
		height: 88rpx;
		background: #606DCE;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.btn {
		width: 200rpx;
		height: 88rpx;
		background: #F6F6F6;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		line-height: 88rpx;
	}

	.second_img {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
	}

	.secondbox {
		margin-right: 50rpx;
	}

	.secondbox:nth-child(3n) {
		margin-right: 0;
	}

	.border-ce {
		border: 4rpx solid #606DCE;
	}

	.flex-column {
		flex-direction: column;
	}

	.sjbox {
		width: 140rpx;
		height: 58rpx;
		background: #F6F6F6;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		color: #333333;
		line-height: 58rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.sjbox:nth-child(3n) {
		margin-right: 0;
	}
</style>